<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>webrx</title>
    <script src="https://unpkg.com/axios"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <style>
        .container {
            padding: 15px;
        }

        .container > button {
            margin: 10px;
        }
    </style>

</head>
<body>
<div class="container">
    <input type="file" name="fs" multiple>
    <button type="button" class="btn btn-primary">post upfile</button>
</div>
<script>
    let f2 = document.querySelector("input[name='fs']")
    let btns = document.querySelectorAll('button')
    btns[0].onclick = function () {
        let formData = new FormData()
        formData.append('id',66)
        formData.append('name','王勇')
        for (const file of f2.files) {
            formData.append('photo[]', file, file.name)
        }
        axios({
            method: 'POST',
            url:'http://localhost/post3.php',
            data:formData,
            headers:{token:'13014577033'}
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    btns[1].onclick = function () {
        axios({
            method: 'POST',
            url: 'http://localhost/post.php',
            data: {
                id: 66,
                name: '李勇'
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                token: '2222222222'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    btns[2].onclick = function () {
        axios({
            method: 'POST',
            url: 'http://localhost/post2.php',
            data: {
                id: 66,
                name: '李勇'
            },
            headers: {
                token: '33333333333'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    btns[3].onclick = function () {
        axios.delete('http://localhost/delete.php?id=99&name=张三丰', {params: {address: '河南郑州'}, headers: {token: '13014577033'}}).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    btns[4].onclick = function () {
        //axios.delete('http://localhost/delete.php?id=99&name=张三丰',{params:{address:'河南郑州'},headers:{token:'13014577033'}}).then(res => {
        axios({
            method: 'PUT',
            url: 'http://localhost/put.php',
            data: {
                id: '111',
                name: '李四六'
            },
            headers: {
                token: '13014577033'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
